<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-button type="primary" @click="reupdate" style="float: right; margin-left: 5px" icon="el-icon-h-refresh1">刷新列表</el-button>
            <el-input style="width: 50%;float: right" placeholder="搜索客户、手机号、会员卡号" suffix-icon="el-icon-search" v-model="page.search" @keyup.enter.native="reupdate" :on-icon-click="reupdate">
            </el-input>
        </div>
        <el-table :data="list" :stripe="true" height="100%">
            <el-table-column type="index" label="#" :index="dIndex"></el-table-column>
            <el-table-column prop="name" label="客户姓名"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="vipcard" label="会员卡号"></el-table-column>
            <el-table-column prop="balance" label="欠款金额"></el-table-column>
            <el-table-column prop="giftbalance" label="赠送金额"></el-table-column>
            <el-table-column prop="arrivetime" label="最后到店时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{scope.row.addtime|hourTime}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-tooltip content="充值" placement="top" :open-delay="800" v-qx="quanxian.chong">
                        <el-button icon="el-icon-h-chongzhi1" type="success" size="mini" @click="chongzhi(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="block center bg-light">
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :page-sizes="[15, 30, 50, 100]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import C from '@/common/common.js'
import P from '@/service/shop/popup.js'
export default {
  name: 'debtList',
  data () {
    return {
      list: [],
      page: {
        search: '',
        pageSize: 15,
        currentSize: 1,
        total: 0
      },
      quanxian: {
        chong: 'debt_chong'
      }
    }
  },
  methods: {
    sizeChange: function (val) {
      this.page.pageSize = val
      this.reupdate()
    },
    currentChange: function (val) {
      this.page.currentSize = val
      this.reupdate()
    },
    dIndex (index) {
      return (this.page.currentSize - 1) * this.page.pageSize + index + 1
    },
    chongzhi: async function (row) {
      let res = await P.openRechargePopup({ gid: row.id })
      if (res) C.success(res.data)
      this.reupdate()
    },
    reupdate: async function () {
      let data = await C.ajax('/shop/recharge/debtlist', { page: JSON.stringify(this.page) }, 'post')
      if (data) {
        this.page.total = data.count
        this.list = data.data
      }
    }
  },
  mounted: function () {
    this.reupdate()
  }
}
</script>